<template>
	<view class="page-container">
		<view class="p-3 pb-1 page-wrap">
			<view class=" order-list">
				<u-list @scrolltolower="scrolltolower" height="1190rpx">
					<u-list-item class="mb-3 p-2 item" v-for="(item,idx) in orderList" :key="idx">
						<navigator :url="'/pages/workOrder/orderDetail?id=' + item.RepairInfo.ID"
							class="flex justify-between align-center order-headr">
							<view class="flex align-center left">
								<view class="index">
									{{idx + 1}}
								</view>
								<view class="title">
									{{item.RepairInfo.Title}}
								</view>
							</view>
							<view class="right">
								<u--text color="#e0584e" :text="item.RepairInfo.Right"></u--text>
							</view>
						</navigator>
						<view class="pt-2 pb-2 mt-2 mb-2 info-list">
							<view class="flex justify-between align-baseline mb-1 info-item"
								v-if="infoItem.Type != 'photo'" v-for="(infoItem,infoIdx) in item.RepairInfo.Items"
								:key="idx+ '_'+infoIdx">
								<view class="name mr-3">{{infoItem.Name}}</view>
								<view class="flex justify-end align-center f-1" @click="handleInfoClick(infoItem,item)">
									<image class="icon" v-if="infoItem.Type == 'addr'" src="/static/work-order/ddr.png"
										mode="widthFix"></image>
									<image class="icon" v-if="infoItem.Type == 'tel'" src="/static/work-order/dh.png"
										mode="widthFix"></image>
									<view class="ml-1 val" :style="{color: infoItem.ValColor ? infoItem.ValColor : ''}">
										{{infoItem.Val}}
									</view>
								</view>
							</view>
							<view v-else class="">
								<u-album class="mt-1" :urls="formatImgUrl(infoItem.Val)"
									@albumWidth="width => albumWidth = width" multipleSize="70" singleSize="70">
								</u-album>

							</view>
						</view>
						<view class="flex justify-end buttons">
							<view v-if="item.Buttons.ShowPay" class="ml-2">
								<navigator :url="`/pages/workOrder/OrderPay?id=${item.RepairInfo.ID}`">
								<u-button color="#6e5af1" text="收款" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowJxc" class="ml-2">
								<navigator :url="`/pages/sheet/sheet?id=${item.RepairInfo.ID}`">
									<u-button color="#df574d" text="领料" size="small" shape="circle"></u-button>
								</navigator>
							</view>
							<view v-if="item.Buttons.ShowAssConfirm" class="ml-2">
								<u-button @click="currItem = item;showAssConfirm=true" color="#3876fd" text="接单"
									size="small" shape="circle">
								</u-button>
							</view>
							<view v-if="item.Buttons.ShowAssReject" class="ml-2">
								<u-button @click="currItem = item;showAssReject=true" color="#ef8242" text="拒绝"
									size="small" shape="circle">
								</u-button>
							</view>
							<view v-if="item.Buttons.ShowRepairDone" class="ml-2">
								<navigator :url="`/pages/workOrder/repairDone?id=${item.RepairInfo.ID}`">
									<u-button color="#5dca81" :text="item.Buttons.RepairDoneText" size="small"
										shape="circle" :customStyle="{padding:'0 14px'}"></u-button>
								</navigator>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="[statusList]" @cancel="showPicker=false" @confirm="handlePickerConfirm"
			keyName="title"></u-picker>
		<u-modal :show="showAssConfirm" @confirm="handleAssConfirm" @cancel="showAssConfirm = false"
			:showCancelButton="true" title="接单" content='您确定要接单吗？'></u-modal>
		<u-modal :show="showAssReject" @confirm="handleAssReject" @cancel="showAssReject = false"
			:showCancelButton="true" title="拒绝">
			<view class="slot-content">
				<u--textarea v-model="AssConfirmDescr" placeholder="请输入拒绝理由" confirmType="done"></u--textarea>
			</view>
		</u-modal>
		<u-safe-bottom></u-safe-bottom>

	</view>
	</view>
</template>

<script>
	import {
		getTimeOutList,
		assConfirm,
		assReject
	} from "@/apis/workOrder.js";
	import {
		parseTime,
		getTotalPageNum
	} from "@/util";
	export default {
		data() {
			return {
				currStatus: 0,
				showPicker: false,
				showAssReject: false,
				showAssConfirm: false,
				currItem: null,
				statusList: [{
					title: '全部',
					code: 2,
				}, {
					title: '待接单',
					code: 7,
				}, {
					title: '待上报',
					code: 0,
				}, {
					title: '已上报',
					code: 1,
				}, {
					title: '服务中',
					code: 3,
				}, {
					title: '完成',
					code: 4,
				}, {
					title: '关闭',
					code: 5,
				}, ],
				kw: '',
				currPageNo: 1,
				totalPagesNo: 1,
				orderList: [],
				AssConfirmDescr: '',
				Latitude: '22',
				Longitude: '11',
			};
		},
		onShow(){
		},
		onLoad() {
			this.initQuery()
			this.fetchData()

			const _this = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.Latitude = res.latitude
					_this.Longitude = res.longitude
				}
			});
		},
		methods: {
			async handleAssConfirm() {
				const currItem = this.currItem
				if (!currItem) return
				const res = await assConfirm({
					RepairId: currItem.RepairInfo.ID,
					Latitude: this.Latitude,
					Longitude: this.Longitude
				})
				if (res.MsgCode != 0) return
				this.showAssConfirm = false
				uni.showToast({
					title: '接单成功',
					duration: 1000,
					icon: 'success'
				});
				setTimeout(() => {
					this.initQuery()
					this.fetchData()
				}, 500)
			},
			async handleAssReject() {
				const currItem = this.currItem
				const AssConfirmDescr = this.AssConfirmDescr
				if (!currItem) return
				if (AssConfirmDescr == '') return uni.showToast({
					title: '请输入拒绝理由',
					duration: 1000,
					icon: 'none'
				})
				const res = await assReject({
					RepairId: currItem.RepairInfo.ID,
					Latitude: this.Latitude,
					Longitude: this.Longitude,
					AssConfirmDescr,
				})
				console.log('handleAssReject', res)

				if (res.MsgCode != 0) return
				this.showAssReject = false
				uni.showToast({
					title: '拒绝成功',
					duration: 1000,
					icon: 'success'
				});
				setTimeout(() => {
					this.initQuery()
					this.fetchData()
				}, 500)
			},
			handlePickerConfirm(e) {
				console.log('handlePickerConfirm', e)
				this.currStatus = e.indexs[0]
				this.showPicker = false
				this.initQuery()
				this.fetchData()
			},
			handleSearch() {
				this.initQuery()
				this.fetchData()
			},
			initQuery() {
				this.currPageNo = 1
				this.totalPagesNo = 1
				this.orderList = []
			},
			async fetchData() {
				const res = await getTimeOutList({
					kw: this.kw,
					status: this.statusList[this.currStatus].code,
					PageNo: this.currPageNo,
				})
				if (res.MsgCode != 0) return

				this.orderList = [...this.orderList, ...res.data.OrderList]
				this.totalPagesNo = getTotalPageNum(res.data.Count, 10)
			},
			handleInfoClick(info, item) {
			console.log('handleInfoClick', info)
			if (info.Type == "tel") {
				uni.makePhoneCall({
					phoneNumber: info.Val
				});
				return
			} else if (info.Type == 'addr') {
				uni.navigateTo({
					url: '/pages/repair/Normal/map?id=' + item.RepairInfo.ID
				})
			} else {
				return
			}
		},
			formatImgUrl(arrStr) {
				try {
					const arr = JSON.parse(arrStr)
					return arr.map(item => {
						return 'http://img.help10000.com' + item
					})
				} catch (ex) {
					console.error("formatImgUrl", ex.message);
				}
			},
			scrolltolower() {
				if (this.currPageNo < this.totalPagesNo) {
					this.currPageNo += 1
					this.fetchData()
				}
			},
		}
	}
</script>

<style lang="scss">
	.page-container {
		.slot-content {
			width: 100%;
		}

		.page-wrap {
			.serach-bar {
				background-color: #fff;
				border-radius: $s-border-radius;
				color: #333;
				font-size: 28rpx;

				.line {
					height: 40rpx;
					width: 1px;
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}

				.search-btn {
					width: 100rpx;
					min-width: 100rpx;
					margin: 0;
					margin-left: 20rpx;
					height: 50rpx;
					border-width: 0 !important;
					border-radius: $s-border-radius;

				}
			}

			.order-list {
				.item {
					background-color: #fff;
					box-shadow: $s-bg-shadow;
					border-radius: $s-border-radius;
					font-size: 28rpx;

					.order-headr {
						.index {
							background-color: $s-text-color-brand;
							border-radius: 10rpx;
							color: #fff;
							padding: 2rpx 10rpx;
							font-size: 20rpx;
							line-height: 28rpx;
							height: 28rpx;
							margin-right: 20rpx
						}

						.title {
							color: #333;
							font-size: 32rpx;
						}
					}

					.info-list {
						position: relative;

						.info-item {
							font-size: 24rpx;

							.name {
								color: $s-text-color-label
							}

							.icon {
								width: 30rpx;
							}
						}

						&:before {
							content: " ";
							position: absolute;
							left: 0;
							top: 0;
							right: 0;
							height: 1px;
							border-top: 1px solid #e5e5e5;
							color: #e5e5e5;
							-webkit-transform-origin: 0 0;
							transform-origin: 0 0;
							-webkit-transform: scaleY(0.5);
							transform: scaleY(0.5);
							z-index: 2; //看情况使用
						}

						&:after {
							content: " ";
							position: absolute;
							left: 0;
							bottom: 0;
							right: 0;
							height: 1px;
							border-top: 1px solid #e5e5e5;
							color: #e5e5e5;
							-webkit-transform-origin: 0 0;
							transform-origin: 0 0;
							-webkit-transform: scaleY(0.5);
							transform: scaleY(0.5);
							z-index: 2; //看情况使用
						}
					}


					.buttons ::v-deep .u-button {
						height: 44rpx;
						padding: 0 6px;
					}
				}
			}
		}
	}
</style>
